<template>

  <div class="table1_container">
    <div class="table1_dataShower" style="padding-bottom: 50px; padding-top: 50px; box-sizing: border-box">
      <button class="report-top-button" @click="back">返回上级页面</button>
      <button class="report-top-button" @click="print">打印报表</button>
      <div style="text-align: center; margin: 10px 0;">
        <div style="display: inline-flex; gap: 20px;">
          <!-- 未完成 -->
          <div style="display: flex; align-items: center;">
            <div
              style="width: 16px; height: 16px; background-color: #ffffff; border: 1px solid #ddd; margin-right: 5px;"
            />
            <span>未完成</span>
          </div>

          <!-- 已完成 -->
          <div style="display: flex; align-items: center;">
            <div
              style="width: 16px; height: 16px; background-color: #e6f7e6; border: 1px solid #ddd; margin-right: 5px;"
            />
            <span>已完成</span>
          </div>

          <!-- 不合格重采 -->
          <div style="display: flex; align-items: center;">
            <div
              style="width: 16px; height: 16px; background-color: #ffebeb; border: 1px solid #ddd; margin-right: 5px;"
            />
            <span>不合格重采</span>
          </div>
        </div>
      </div>
      <h1>见证取样记录</h1>
      <!-- 基本信息部分 - 在表格上方 -->
      <div class="project-name-info" style="width:90%;margin:0 auto;display: flex">
        <div style="text-align: left">
          <span>工程名称:</span>
          <span>{{ projectName + '  ' + subprojectName }}</span>
        </div>
      </div>
      <table class="wendu-table1_top_table">
        <tr>
          <td colspan="2">样品名称及规格</td>
          <td>取样部位</td>
          <td>批量</td>
          <td>数量（t）</td>
          <td colspan="2">日期（取样）</td>
          <td>合格证编号</td>
        </tr>
        <tr v-for="(item, index) in reportData" :key="index">
          <td colspan="2">{{ item.steelType + '  ' + item.diameter }}</td>
          <td>{{ item.usePart }}</td>
          <td>{{ item.batchAmount }}</td>
          <td>{{ item.getAmount }}</td>
          <td colspan="2">{{ item.witnessDate }}</td>
          <td>{{ item.heatBatchNumber }}</td>
        </tr>
        <tr class="sign-row">
          <td colspan="4" class="sign-td">
            <div class="sign-block">
              <div class="line">施工单位（签章）</div>
              <div class="line">取样人：</div>
              <div class="date">年 月 日</div>
            </div>
          </td>
          <td colspan="4" class="sign-td">
            <div class="sign-block">
              <div class="line">见证单位（签章）</div>
              <div class="line">见证人：</div>
              <div class="date">年 月 日</div>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>

/*
 *    这个报表真麻烦！！！
 *
 */

import { getSteelJianZhengPreview } from '@/api/statementManage/wuZi/wuZi'

export default {
  data() {
    return {
      localStorageId: '',
      reportData: {},
      previewData: {},
      projectName: '',
      subprojectName: ''
    }
  },
  async mounted() { // 钩子函数
    const sessionData = sessionStorage.getItem('tempObj1')

    const parseData = JSON.parse(sessionData)
    this.projectName = parseData.projectName
    this.subprojectName = parseData.subprojectName
    const subprojectId = parseData.subprojectId

    const { result } = await getSteelJianZhengPreview(subprojectId)
    this.reportData = result
  },
  beforeDestroy() { // 离开页面要做的事
    // 那就是清除localstorage！！！
    if (this.localStorageId) {
      localStorage.removeItem(this.localStorageId)
    }
    document.querySelector('body').setAttribute('style', 'background-color: white;') // 还原，因为这是个全局样式
  },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background-color:#f5f5f5;') // 设置对比色
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    print() {
      window.print()
    }
  }
}
</script>

<style>
@import '../../../../assets/css/concrete/jianzheng.css';

/*
先来设置每个任务项对应的背景颜色吧！
 */
.row-unfinished {
  background-color: #ffffff;
  /* 未完成 - 白色或默认色 */
}

.row-finished {
  background-color: #e6f7e6;
  /* 已完成 - 浅绿色 */
}

.row-failed {
  background-color: #ffebeb;
  /* 不合格重采 - 浅红色 */
}

.table1_container {
  width: 80%;
  background: white;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-bottom: 20px;
}

.table1_dataShower {
  width: 80%;
  background: white;
  margin: 0 auto;
  border: 2px black solid;
}

/*这是返回按钮的样式*/
.report-top-button {
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Arial', sans-serif;
  color: #ffffff;
  background: linear-gradient(90deg, #1e3a8a, #3b82f6);
  /* 建筑行业蓝色调，稳重且有活力 */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.report-top-button:hover {
  background: linear-gradient(90deg, #1e3a8a, #2563eb);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.report-top-button:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}

/*表格样式*/
.wendu-table1_top_table {
  width: 90%;
  margin: 0 auto;
  border-collapse: collapse;
  border: 1px solid black;
  table-layout: fixed;
}

/*表格的样式*/
.wendu-table1_top_table tr td {
  height: 50px;
  border: 1px solid black;
  word-wrap: break-word;
  /* 允许长单词换行 */
  overflow-wrap: break-word;
  /* 更现代的换行属性 */
}

#table1_top_table_last_col {
  width: 20%;
  min-height: 50px;
}

th {
  box-sizing: border-box !important;
}

.sign-row td {
  padding: 12px 8px;
  /* 单元格内部间距 */
  border: 1px solid black;
}

/* 外层容器使用 flex 排列两列并留出空隙 */
.sign-container {
  display: flex;
  gap: 40px;
  /* 两列之间的水平间隙，可调整 */
  align-items: stretch;
  /* 两列高度一致 */
  justify-content: space-between;
}

/* 每个签章块内按列布局（三行） */
.sign-block {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 180px;
  /* 最小宽度，可按需调整 */
  position: relative;
  /* 为 date 的绝对定位提供参考 */
  padding: 6px 8px;
}

/* 普通行文字（第一、二行） */
.sign-block .line {
  margin-bottom: 6px;
  color: #333;
  line-height: 5;
  text-align: left;
}

/* 年月日靠右下角：使用 margin-top: auto 将其推到底部，再右对齐 */
.sign-block .date {
  margin-top: auto;
  /* 推到容器底部 */
  text-align: right;
  /* 靠右显示 */
  color: #333;
  padding-right: 6px;
}

/* 小屏响应：改为垂直排列，两块上下显示 */
@media (max-width: 700px) {
  .sign-container {
    flex-direction: column;
    gap: 12px;
  }

  .sign-block {
    min-width: auto;
  }
}

.date {
  letter-spacing: 24px;
  /* 或使用 word-spacing */
}

@media print {
  @page {
    size: A4 portrait;
  }

  .table1_container {
    width: 100% !important;
    margin: 0 0 !important;
    font-size: 14px !important;
  }

  .table1_dataShower {
    width: 100% !important;
    margin: 0 0 !important;
    padding: 15px !important;
    border: none !important;
    font-size: 13px !important;
  }

  /* 确保工程名称在打印时可见 */
  .project-name-info {
    display: flex !important;
    width: 90% !important;
    margin: 10px auto !important;
    font-size: 14px !important;
  }

  .project-name-info div {
    display: block !important;
  }

  .report-top-button {
    display: none !important;
  }

  /* 隐藏图例，但保留工程名称 */
  .table1_dataShower > div:not(.project-name-info) {
    display: none !important;
  }

  .wendu-table1_top_table tr td {
    height: 45px !important;
    font-size: 12px !important;
  }

  h1 {
    font-size: 20px !important;
  }
}
</style>
